<template>
	<view>
		<view class="w90 uni-form-item uni-column">
			<picker  class="SMpd fs13" @change="examinationType" :range="examinationTypeArray">
				<label>店铺类型：</label>
				<label class="fs13" style="position: absolute;right: 0;text-align: right;">{{ examinationTypeArrayType }}</label>
			</picker>
		</view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>店铺名称</text>
				<input class="fs13" type="text" @blur="namew" placeholder="**大盘鸡" />
			</view>
		</view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>银行卡号</text>
				<input class="fs13" type="text" @blur="bank_cardw" value="" placeholder="13487879874645" />
			</view>
		</view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>店铺地址</text>
				<input class="fs13" type="text" @blur="addressw" value="" placeholder="**街道**路牌" />
			</view>
		</view>
		<view class="w90">
			<view class="SMpd fs13">
				<text>店铺地址()</text>
				<input class="fs13" type="text" @blur="LOCAtionw" value="" placeholder="" />
			</view>
		</view>
		<view class="w90" style="border-bottom: 0px ">
			<view class="SMpd fs13">
				<h5>营业执照</h5>
				<view class="SMimgs" style="margin-top: 72rpx;">
					<image :src="business_license" @tap="selectImg" mode="widthFix"></image>
					<view class="fs12" style="margin-top:28rpx;color: rgba(171,171,171,1);text-align: center;">营业执照正面
					</view>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 100rpx;">
			<text></text>我已阅读并同意<text style="color: #1D70FF;">《入驻协议》</text>
		</view>
		<view class="SMtj fs14" @click="tijiao" style="margin: 30rpx 0;">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				name: '', //	店铺名称
				bank_card_no: '', //	银行卡号
				address: '', //店铺地址
				location: '', //	店铺地址,例如:106.520911,29.512809
				business_license: '../../../static/iconsfz.png', //	营业执照照片地址
				examinationTypeArray: [' ---请选择---', '美味熟食', '果蔬生鲜', '肉类海鲜', '米面粮油',
				'休息零食','酒水饮料','厨房调料','日用百货'],
				// examinationTypeArray:[],
				examinationTypeIndex: 0,
				examinationTypeArrayType: '  ---点击请选择---',
			}
		},
		computed: {
			...mapState(['token'])
		},
		onLoad() {
			this.$request('api/classify',{},'GET',{}).then(res => {
				console.log(res.data)
			})
		}
		,
		methods: {
			selectImg: function() {
				let _this = this
				uni.chooseImage({
					success: function(res) {
						_this.business_license = res.tempFilePaths[0];
						console.log(_this.business_license)
					}
				})
			},
			namew: function(e) {
				this.name = e.target.value
				console.log('名字' + this.name)
			},
			bank_cardw: function(e) {
				this.bank_card = e.target.value
				console.log('银行卡' + this.bank_card)
			},
			addressw: function(e) {
				this.address = e.target.value
				console.log('店铺地址' + this.bank_card)
			},
			LOCAtionw: function() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: res => {
						console.log(res)
						this.location = res.longitude + ',' + res.latitude
						console.log('店铺地址,例如:106.520911,29.512809' + '真实地址' + this.location)
					}
				})
			},
			examinationType(e) {
				this.examinationTypeIndex = e.target.value;
				this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
				console.log(this.examinationTypeArrayType)
				
			},
			tijiao: function() {
				this.$request('api/store/enter', {
					name: this.name,
					bank_card_no: this.bank_card_no,
					address: this.address,
					location: this.location,
					business_license: this.business_license
				}, 'POST', {
					Authorization: this.token,
				}).then(res => {
					console.log(res)
				})
				// console.log(this.token,this.username,this.idcard_no,this.idcard_image_is,this.idcard_image_the)
			}

		}
	}
</script>

<style>
	.bgf8 {
		width: 100vw;
		height: 100vh;
		background: #F8F8F8;
	}

	.title {
		position: relative;
		background: #FFFFFF;
	}

	.returnh {
		width: 20px;
		height: 20px;
		position: absolute;
		left: 34rpx;
		top: 25rpx;
	}

	.title>text {
		display: block;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		line-height: 88rpx;
	}

	.w90 {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid rgba(216, 216, 216, 1);
	}

	.SMpd {
		padding: 50rpx 0 36rpx 0;
		position: relative;
	}

	.SMpd>input {
		width: 200rpx;
		text-align: right;
		position: absolute;
		right: 0;
		top: 45rpx;
	}

	.SMimgs {
		width: 358rpx;
		height: 248rpx;
		margin: 0 auto;
	}

	.SMimgs>image {
		width: 358rpx;
		height: 248rpx;
	}

	.SMtj {
		width: 466rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		color: rgba(255, 255, 255, 1);
		background: rgba(36, 188, 129, 1);
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
